/**
 *   @function 封装高阶段组件，实现路由的动态加载
 *
 *  高阶组件：高阶组件是参数为组件，返回值为新组件的函数。 （设计模式）
 *  作用：复用组件逻辑
 *  场景：input受控组件 （value  onchange）
 *       路由包装
 *       
*/
import React from 'react';
function asyncComponent(importComponent) {
  return class AsyncCom extends React.Component {
    state = {
      component: null
    }

    componentDidMount() {
      importComponent().then(mod => {
        console.log('mod:', mod)
        this.setState({
          component: mod.default
        })
      })
    }

    render() {
      const Com = this.state.component
      return Com != null ? <Com {...this.props}></Com> : null
    }
  }
}

export default asyncComponent